<template>

    <div class="area">
        <div class="area-left animate__animated" :class="{animate__fadeInLeft:animation}" v-show="animation">
            <div class="area-box">
                <div class="area-title f1">
                    {{ title }}
                </div>
                <div class="slogan  f3" v-html="introduce">

                </div>
                <div class="area-input f3">
                    <input type="text" :placeholder="$t('index.area.inputRemark')">
                </div>
                <div class="area-button base-button f2" @click="()=>{this.$router.push('/contactUs')}">
                    {{ $t('index.area.button') }}
                </div>
            </div>
        </div>
        <div class="area-right  animate__animated" :class="{animate__fadeInRight:animation}" v-show="animation">
            <div class="button-item" v-for="(item,index) in businessAreaList" :key="index"
                 @click="()=>{this.$router.push('/businessArea')}">
                <div class="icon">
                    <img :src="item.img" alt="">
                </div>
                <div>
                    {{ item.title }}
                </div>
            </div>

        </div>
    </div>
</template>
<script>
export default {
    props: ['animation', 'businessAreaList', 'introduce', 'title'],

}
</script>
<style lang="less">
.three-box {
    .area {
        width: 100%;
        height: 100%;
        display: flex;
		justify-content: center;
		align-items:center;
        flex-direction: row;
        background: url("~@/assets/img/business-header.png");
        background-size: cover;

        .area-left {
            width: 700px;
			height: 590px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(255, 255, 255, 0.8);

            //div {
            //    margin-bottom: 70px;
            //}

            .area-box {
                padding: 123px;
                height: 100%;
                display: flex;
                flex-direction: column;
                //justify-content: space-between;

                .area-title {
                    color: #707070;
                }
                .slogan {
                    margin-top: 45px;
                    color: #707070;
                }
                .area-input {
                    margin-top: 14px;
                    width: 100%;
                    input {
                        color: #707070;
                        border: 1px solid #000;
                        padding: 20px;
                        width: 90%;
                    }
                }
                .area-button {
                    color: #FFFFFF;
                    margin-top: 51px;
                    width: 40%;
                    cursor: pointer;
                }
            }
        }

        .area-right {
            width: 540px;
			height: 430px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            align-items: center;
            grid-column-gap: 80px;
            padding: 80px;
            background: rgba(255, 255, 255, 0.8);

            .button-item {
                height: 100px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 20px 10px;
                border-radius: 5px;
                cursor: pointer;

                .icon {
                    margin-bottom: 10px;

                    img {
                        height: 85px;
                        width: 80px;
                    }
                }
            }
        }
    }
}
</style>

